<!--
 * @Author       : GaoFeiXiang
 * @Date         : 2023-06-22 18:50:42
 * @Description  : 预排订单
 * @FilePath     : /aps-admin/src/views/pre-order/index.vue
-->
<template>
  <div class="erpHeadquartersLevel">
    <el-card>
      <el-row>
        <el-col :span="20">
          <el-form class="searchForm" :model="searchForm" inline size="mini">
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="searchForm.status" placeholder="请选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input
                v-model="searchForm.orderNum"
                placeholder="订单号"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <span class="expand">{{ expand ? "收起" : "展开" }}</span>
          <i class="expand el-icon-arrow-down" v-if="!expand" />
          <i class="expand el-icon-arrow-up" v-else />
          <el-button type="primary" size="mini">查询</el-button>
          <el-button type="" size="mini">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-row class="select-rows">
      <el-col :span="24">
        <span class="select">已选1项</span>
        <el-button type="text" size="small"> 完成订单 </el-button>
      </el-col>
    </el-row>
    <el-card>
      <second-table-list
        :total="total"
        :pageSize="page.pageSize"
        :current="page.page"
        @changePage="changePage"
      >
        <my-table
          slot="table"
          :columns="columns"
          :data="tdata"
          :showSelection="true"
          @selectChange="selectChange"
          :showColumnSetting="true"
          :id="1"
        >
          <template slot="table-title">
            <div class="table-title">
              <h1>订单列表</h1>
            </div>
          </template>
          <template v-slot:action="{ row }">
            <el-button type="text" @click="viewDetails(row)">详情</el-button>
            <el-button type="text" @click="viewPreOrder(row)"
              >查看预排订单</el-button
            >
            <el-button type="text" @click="quantityReturn(row)"
              >数量返还</el-button
            >
            <el-button type="text" @click="capacity(row)"
              >产能占用申请</el-button
            >
          </template>
        </my-table>
      </second-table-list>
    </el-card>
    <el-dialog
      title="已关联预排订单"
      :visible.sync="preOrderVisible"
      width="100%"
    >
      <my-table
        :columns="orderColumns"
        :data="orderTdata"
        :showSelection="false"
        @selectChange="selectChange"
        :showColumnSetting="false"
        :id="2"
      ></my-table>
    </el-dialog>
    <el-dialog
      title="数量返还"
      :visible.sync="quantityReturnVisible"
      width="40%"
    >
      <div class="quantity-list">
        <p>
          <span>订单编号:</span>
          <span>BZ2105001</span>
        </p>
        <p>
          <span>批次序号:</span>
          <span>2</span>
        </p>
        <p>
          <span>批次分单量:</span>
          <span>2700000</span>
        </p>
        <p>
          <span>已排量:</span>
          <span>20000</span>
        </p>
      </div>
      <el-form :model="quantityForm" ref="quantityFormRef" label-width="65px">
        <el-form-item label="退回量">
          <el-input
            v-model="quantityForm.num"
            placeholder="请填写"
            style="width: 40%; margin-right: 15px"
          ></el-input>
          <span>退回量不能大于分单量-排产量</span>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="quantityForm.comment"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose(1)">取 消</el-button>
        <el-button type="primary" @click="onOk(1)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="产能占用"
      :visible.sync="capacityOccupancyVisible"
      width="40%"
    >
      <div class="capacity-list">
        <p>
          <span>订单编号:</span>
          <span>BZ2105001</span>
        </p>
        <p>
          <span>批次序号:</span>
          <span>2</span>
        </p>
        <p>
          <span>待排产量:</span>
          <span>6000</span>
        </p>
      </div>
      <el-form :model="capacityForm" ref="capacityFormRef" label-width="100px">
        <el-form-item label="申请占用订单">
          <el-select
            v-model="capacityForm.order"
            placeholder=""
            style="width: 40%; margin-right: 15px"
          >
            <el-option label="" value=""></el-option>
          </el-select>
          <span>剩余预排产量:6000</span>
        </el-form-item>
        <el-form-item label="申请占用量">
          <el-input
            v-model="capacityForm.num"
            placeholder="请填写"
            style="width: 40%; margin-right: 15px"
          ></el-input>
          <span>退回量不能大于分单量-排产量</span>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="capacityForm.comment"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose(2)">取 消</el-button>
        <el-button type="primary" @click="onOk(2)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import columnSetting from "../../components/table/columnSetting.vue";
import myTable from "../../components/table/myTable.vue";
import secondTableList from "@/components/table/secondTableList";
export default {
  components: { columnSetting, myTable, secondTableList },
  data() {
    return {
      searchForm: {},
      expand: false,
      header: false,
      tableTail: true,
      total: 0,
      page: {
        page: 1,
        pageSize: 10,
      },
      columns: [
        {
          label: "预排订单号",
          prop: "num",
          fixed: true,
        },
        {
          label: "客户名称",
          prop: "name",
        },
        {
          label: "管理人员",
          prop: "unit",
        },
        {
          label: "排产地区",
          prop: "clerk",
        },
        {
          label: "排产工厂",
          prop: "clerk",
        },
        {
          label: "产品大类",
          prop: "product",
        },
        {
          label: "产品二级分类",
          prop: "secondaryClassification",
        },
        {
          label: "产品名称",
          prop: "productName",
        },
        {
          label: "排产量",
          prop: "customerDemand",
        },
        {
          label: "转换成标准品的预排产量/件",
          prop: "customerDemand",
        },
        {
          label: "批次序号",
          prop: "customerDemand",
        },
        {
          label: "批次预排产量/件",
          prop: "customerDemand",
        },

        {
          label: "批次最早上线时间",
          prop: "customerDemand",
        },
        {
          label: "批次交期",
          prop: "customerDemand",
        },
        {
          label: "整单交期",
          prop: "customerDemand",
        },
        {
          label: "瓶颈工序",
          prop: "customerDemand",
        },
        {
          label: "瓶颈工序工时/S",
          prop: "customerDemand",
        },
        {
          label: "瓶颈资源量/件",
          prop: "customerDemand",
        },
        {
          label: "标准品转换系数",
          prop: "customerDemand",
        },
        {
          label: "产能负荷率",
          prop: "customerDemand",
        },
        {
          label: "剩余产能(标准品)/件",
          prop: "customerDemand",
        },
        {
          label: "月计划冲销量/件",
          prop: "customerDemand",
        },
        {
          label: "月计划冲销量(转换成标准品)/件",
          prop: "customerDemand",
        },
        {
          label: "月计划实际产能占用",
          prop: "customerDemand",
        },
        {
          label: "排产状态",
          prop: "status",
        },
        {
          label: "操作",
          prop: "action",
          fixed: "right",
          slot: "action",
          width: "300",
        },
      ],
      tdata: [
        {
          name: "张三",
        },
      ],
      selectChangeList: [],
      show: false,
      // 预排订单弹窗
      preOrderVisible: false,
      orderColumns: [
        {
          label: "预排订单号",
          prop: "num",
        },
        {
          label: "客户名称",
          prop: "name",
        },
        {
          label: "管理人员",
          prop: "unit",
        },
        {
          label: "业务员",
          prop: "clerk",
        },
        {
          label: "产品大类",
          prop: "product",
        },
        {
          label: "产品二级分类",
          prop: "secondaryClassification",
        },
        {
          label: "产品名称",
          prop: "productName",
        },
        {
          label: "客户需求量",
          prop: "customerDemand",
          sortable: true,
        },
        {
          label: "外协量",
          prop: "customerDemand",
        },
        {
          label: "批次序号",
          prop: "customerDemand",
        },
        {
          label: "批次预排产量/件",
          prop: "customerDemand",
          sortable: true,
        },

        {
          label: "批次最早上线时间",
          prop: "customerDemand",
          sortable: true,
        },
        {
          label: "批次交期",
          prop: "customerDemand",
          sortable: true,
        },
        {
          label: "整单交期",
          prop: "customerDemand",
          sortable: true,
        },
      ],
      orderTdata: [],
      //   数量返还
      quantityReturnVisible: false,
      quantityForm: {},
      capacityOccupancyVisible: false,
      capacityForm: {},
    };
  },
  created() {},
  mounted() {},
  methods: {
    changePage(val) {
      this.page = val;
    },
    selectChange(val) {
      console.log(val);
      this.selectChangeList = val;
    },
    columnChange(val) {
      this.columnsSetting = val;
    },
    // 详情
    viewDetails(item) {
      this.$router.push({
        name: "erpFactoryDetails",
        query: { id: item.id },
        params: { activeMenu: this.$route.path },
      });
    },
    viewPreOrder(item) {
      this.preOrderVisible = true;
    },

    quantityReturn(item) {
      this.quantityReturnVisible = true;
    },
    capacity(item) {
      this.capacityOccupancyVisible = true;
    },
    onClose(val) {
      if (val == 1) {
        this.quantityReturnVisible = false;
      } else if (val == 2) {
        this.capacityOccupancyVisible = false;
      }
    },
    onOk(val) {
      if (val == 1) {
        this.quantityReturnVisible = false;
      } else if (val == 2) {
        this.capacityOccupancyVisible = false;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.erpHeadquartersLevel {
  width: 100%;
  .searchForm {
    .el-form-item {
      margin-bottom: unset;
    }
  }
  .expand {
    margin-right: 10px;
    color: #8fa1c9;
  }
  .select-rows {
    margin: 20px 0;
    .select {
      margin-right: 15px;
    }
  }
}
.table-title {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  h1 {
    font-size: 20px;
  }
  .right {
    span {
      font-size: 14px;
      color: #8fa1c9;
      margin-right: 10px;
    }
    .el-switch {
      margin-right: 20px;
    }
  }
}
.icons {
  vertical-align: middle;
}
.quantity-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 65%;
  p {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-right: 20px;
  }
}
.capacity-list {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
